<template>
  <div class="login-container">
    <!-- 背景装饰元素 -->
    <div class="bg-decoration"></div>
    
    <div class="login-wrapper">
      <!-- 登录卡片 -->
      <el-card class="login-card">
        <!-- 品牌/系统标识 -->
        <div class="login-header">
          <el-avatar class="login-logo" size="large">
            <i class="el-icon-user"></i>
          </el-avatar>
          <h2 class="login-title">工作人员登录</h2>
          <p class="login-subtitle">请输入您的账号信息</p>
        </div>

        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginFormRef"
          label-width="80px"
          class="login-form"
        >
          <el-form-item label="员工ID" prop="employeeId">
            <el-input
              v-model="loginForm.employeeId"
              placeholder="请输入员工ID"
              prefix-icon="el-icon-user"
              @keyup.enter="handleLogin"
              :class="{ 'input-focus': isEmployeeIdFocused }"
              @focus="isEmployeeIdFocused = true"
              @blur="isEmployeeIdFocused = false"
            />
          </el-form-item>

          <el-form-item label="密码" prop="employeePassword">
            <el-input
              v-model="loginForm.employeePassword"
              type="password"
              placeholder="请输入密码"
              show-password
              prefix-icon="el-icon-lock"
              @keyup.enter="handleLogin"
              :class="{ 'input-focus': isPasswordFocused }"
              @focus="isPasswordFocused = true"
              @blur="isPasswordFocused = false"
            />
          </el-form-item>
        </el-form>

        <el-button 
          type="primary" 
          style="width: 100%" 
          @click="handleLogin"
          :loading="isLoading"
          class="login-btn"
        >
          <template #default>
            <span v-if="!isLoading">登录</span>
            <span v-else>
              <i class="el-icon-loading"></i>
              登录中...
            </span>
          </template>
        </el-button>

        <div class="register-link">
          没有账号？
          <router-link to="/register" class="register-text">注册</router-link>
        </div>
      </el-card>

      <!-- 页脚信息 -->
      <div class="login-footer">
        <p>© 2023 员工管理系统 - 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { get } from '../utils/axios'

const router = useRouter()
const loginFormRef = ref()

// 表单状态
const loginForm = reactive({
  employeeId: '',
  employeePassword: ''
})

// 交互状态
const isLoading = ref(false)
const isEmployeeIdFocused = ref(false)
const isPasswordFocused = ref(false)

// 表单验证规则
const loginRules = {
  employeeId: [
    { required: true, message: '请输入员工ID', trigger: 'blur' },
    { pattern: /^[1-9]\d*$/, message: '员工ID必须为正整数', trigger: 'blur' }
  ],
  employeePassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

// 处理登录
async function handleLogin() {
  // 1. 本地校验
  try {
    await loginFormRef.value.validate()
  } catch {
    return
  }

  const id = Number(loginForm.employeeId)
  const pwd = loginForm.employeePassword.trim()

  try {
    // 2. 显示加载状态
    isLoading.value = true

    // 3. 登录请求
    const loginRes = await get('/employee/login', { employeeId: id, employeePassword: pwd })
    if (loginRes?.state !== 'success') {
      ElMessage.error(loginRes?.message || '员工ID或密码错误')
      return
    }

    // 4. 获取员工信息
    const employeeInfo = await get('/employee/getEmployeeById', { employeeId: id })
    if (!employeeInfo?.employeeId) {
      ElMessage.error('获取员工信息失败，请重新登录')
      return
    }

    // 5. 缓存信息
    localStorage.setItem('employeeId', employeeInfo.employeeId)
    localStorage.setItem('storeId', employeeInfo.storeId)
    
    ElMessage.success('登录成功，正在跳转...')
    
    // 6. 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      router.push('/')
    }, 800)

  } catch (err) {
    console.error(err)
    ElMessage.error('登录失败，请检查网络或联系管理员')
  } finally {
    // 7. 关闭加载状态
    isLoading.value = false
  }
}
</script>

<style scoped>
/* 基础容器样式 */
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
  position: relative;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 20%);
  z-index: 1;
}

/* 登录卡片容器 */
.login-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 20px;
}

/* 登录卡片样式 */
.login-card {
  width: 100%;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: all 0.3s ease;
}

.login-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 登录头部样式 */
.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo {
  margin: 0 auto 15px;
  background-color: #409eff;
  transition: transform 0.3s ease;
}

.login-card:hover .login-logo {
  transform: scale(1.05);
}

.login-title {
  margin: 0 0 8px;
  color: #303133;
  font-weight: 600;
  font-size: 22px;
}

.login-subtitle {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

/* 表单样式 */
.login-form {
  margin-bottom: 30px; /* 调整表单底部间距，删除记住我后增加一点空间 */
}

/* 输入框焦点效果 */
.input-focus .el-input__wrapper {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 登录按钮样式 */
.login-btn {
  height: 45px;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-btn:not(.is-loading):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 注册链接 */
.register-link {
  margin-top: 15px;
  text-align: center;
  color: #606266;
  font-size: 14px;
}

.register-text {
  color: #409eff;
  margin-left: 4px;
  transition: color 0.2s;
}

.register-text:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 页脚样式 */
.login-footer {
  margin-top: 20px;
  text-align: center;
}

.login-footer p {
  color: #909399;
  font-size: 12px;
  margin: 0;
}


/* 响应式调整 */
@media (max-width: 768px) {
  .login-card {
    padding: 25px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  }
  
  .login-title {
    font-size: 20px;
  }
  
  .login-btn {
    height: 42px;
    font-size: 15px;
  }
}
</style>
